/***************************************************************
 * lora.layer.js
 *
 * 插件名称: 弹出层插件
 * jQuery版本:1.9+
 * 国际惯例：Bladnir 中国大陆 第二大区三战场组 奥拉基尔
 * 邮箱：bladnir@outlook.com
 * 创建时间：2016年9月7日 
 * 描述：基于JQuery弹出层插件，可以支持iframe，支持拖拽
 * 修改历史：
 * 
 * 参数说明：{
 * 	width: 宽度 默认 360
 *  height:高度 默认 180
 *  title: 标题 默认 提示信息
 *  content：内容 默认 空
 *  bgOpacity ：遮罩层透明度 默认0.6
 *  showMatte : 是否打开遮罩层 默认 true
 *  type: 目前有 custom alert confirm info iframe 默认 custom
 *  	  type 为 iframe时候 content需要传url
 *        type 为 alert confirm info 的时候会生成固定dom，但是需要传内容
 *        type 为 空时 content为自定义的dom元素
 *  
 *  onClose: 右上角点击关闭的回调函数 默认 null
 *  onCancelButton:取消按钮的回调函数 默认 null
 *  onConfirmButton:确认按钮的回调函数 默认 null
 *  allowDrag:是否允许拖拽 默认 true
 *  buttonArray：[ 按钮数组 默认 null
 *      name: 按钮名称
 *      callback:回调函数
 *  ]
 *  
 * }
 * 
 * 调用样例：
 * 
 * 			new $.layer({
 *				content : '1111111',
 *				type : 'confirm',
 *				title : '提示',
 *				width : 386,
 *				showMatte : true,
 *				height : 200
 *			}).show();
 * 
 * 
 * 
 * 
 * 
 *****************************************************************/

(function($) {

	/**
	 * 构造方法
	 */
	$.layer = function(opts) {
		opts = opts || {};
		opts.width = (opts.width || 360) > $('body').width() ? $('body').width() : (opts.width || 360);
		opts.height = (opts.height || 180);
		opts.title = opts.title || '提示信息';
		opts.content = opts.content || '';
		opts.bgOpacity = opts.bgOpacity || 0.6;
		opts.showMatte = typeof opts.showMatte === 'undefined' ? true : opts.showMatte;
		opts.type =  opts.type || '';
		opts.onClose = opts.onClose || null;
		opts.onCancelButton = opts.onCancelButton || null;
		opts.onConfirmButton = opts.onConfirmButton || null;
		opts.allowDrag = typeof opts.allowDrag === 'undefined' ? true : opts.allowDrag;
		opts.buttonArray = opts.buttonArray || null;
		
		this.opts = opts;

		this.background;//遮罩层对象
		this.layerObjObj;//弹出层对象
		
		this.relTop;//真实的top值 （拖动后）
		this.relLeft;//真实的left值（拖动后）
		this.iframeObj;//IFrame对象

		this._initDom();
		this._creatContent();
		this._resetPosition();

	}
	
	/**********************************
	 * 
	 *  成员属性
	 *  
	 * _开头的为私有方法 
	 * 其他为公共方法
	 **********************************/
	$.layer.prototype = {

		/****************************
		 * 
		 * 初始化DOM元素
		 * 
		 ***************************/
		_initDom : function() {

			// 遮罩层
			this.background = $('<div />').css({
				'width' : $(window).width() + 'px',
				'height' : $(window).height() + 'px',
				'z-index' : 99,
				'opacity' : this.opts.bgOpacity
			}).addClass('loraLayer-background');

			
			//弹出层内容
			var layerContent = '';

			var left = ($(window).width() - this.opts.width) / 2 + 'px';
			var top =  ($(window).height() - this.opts.height) / 2 + 'px';
			var titleWidth = (this.opts.width - 50) + 'px';
			
			layerContent = layerContent + '<div class="loraLayer-mainWrap" style="width: '+this.opts.width+'px; z-index: 100; left: '+left+'; top: '+top+'; ">';
			layerContent = layerContent + '   <div class="loraLayer-headWrap">';
			layerContent = layerContent + '    <div class="loraLayer-titleWrap" style="float: left; width: '+titleWidth+';">' + this.opts.title + '</div>';
			layerContent = layerContent + '      <div style="text-align: right;">';
			layerContent = layerContent + '        <a style="visibility: visible;" class="loraLayer-closeWrap" href="javascript:;">×</a>';
			layerContent = layerContent + '      </div>';
			layerContent = layerContent + '    </div>';
			layerContent = layerContent + '    <div class="loraLayer-contentWrap" style="width: '+this.opts.width+'px; height: '+(this.opts.height - 24)+'px; "></div>';
			layerContent = layerContent + '    <div class="loraLayer-footer"></div>';
			layerContent = layerContent + '   </div>';
			layerContent = layerContent + '</div>';

			this.layerObj = $(layerContent);
			var _this = this;
			
			//绑定右上角关闭链接动作
			$(this.layerObj).find('a[class="loraLayer-closeWrap"]').on('click',function(){
				if(_this.onClose){
					_this.onClose();
				}else{
					_this.close();
				}
			});
		},

		/*****************************
		 * 
		 * 创建按钮
		 * 
		 *****************************/
		_creatButton : function(buttonArray){
			
			var footer = $(this.layerObj).find('div[class="loraLayer-footer"]');
			var _this = this;
			
			$(buttonArray).each(function(index,element){
				
				var buttonObj;
				
				if (typeof(element) === 'string') {
					
					var name = '';
					
					if(element === 'confirm'){
						name = '确定';
					}else if (element === 'cancel'){
						name = '取消';
					}
					
					buttonObj = $('<input class="loraLayer-button" value="' + name + '" type="button" />').on('click',function(){
						if(element === 'confirm'){
							if(_this.opts.onConfirmButton){
								_this.opts.onConfirmButton();
								_this.close();
							}else{
								_this.close();
							}
						}else if (element === 'cancel'){
							if(_this.opts.onCancelButton){
								_this.opts.onCancelButton();
								_this.close();
							}else{
								_this.close();
							}
						}
					});
					
				}else{
					buttonObj = $('<input class="loraLayer-button" value="'+element.name+'" type="button" />').on('click',function(){
						if(element.callback){
							element.callback();
						}
					});
				}
				
				$(footer).append(buttonObj);
			});
		},

		/*****************************
		 * 
		 * 创建弹出层的内容
		 * 
		 *****************************/
		_creatContent : function() {
			
			var _this = this;
			var contentWrap = $(this.layerObj).find('div[class="loraLayer-contentWrap"]');
			
			switch(this.opts.type){
				case 'alert':
					$(contentWrap).append('<div class="warning">'+this.opts.content+'</div>');
					this._creatButton(['confirm']);
					break;
				case 'info':
					$(contentWrap).append('<div class="prompt">'+this.opts.content+'</div>');
					this._creatButton(['confirm']);
					break;
				case 'confirm':
					$(contentWrap).append('<div class="success">'+this.opts.content+'</div>');
					this._creatButton(['cancel','confirm']);
					break;
				case 'custom':
					$(contentWrap).append(this.opts.content);
					this._creatButton(_this.opts.buttonArray);
					break;
				case 'iframe':	
					
					var iframeObj = $('<iframe border="0" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto"></iframe>');
					$(iframeObj).css({
						'width': '100%'
					}).attr({
						'width'  : '100%',
						'src'    : _this.opts.content
					}).attr('height',(_this.opts.height-50)+'px');
					$(contentWrap).css('padding',0);
					$(contentWrap).append(iframeObj);
					
					this.iframeObj = iframeObj;
					
					this._creatButton(_this.opts.buttonArray);
					
					break;
				default:
					$(contentWrap).append(this.opts.content);
					this._creatButton(_this.opts.buttonArray);					
					break;
		     }
		},
		
		/*****************************
		 * 
		 * 可拖拽
		 * 
		 *****************************/
		_resetPosition : function(){
			
			var _this = this;
			
			//绑定拖拽插件
			if (this.opts.allowDrag) {
				this.layerObj.Drags({
					handler: $(this.layerObj).find('div[class="loraLayer-titleWrap"]'),
					range: 'window',
					onDrop: function() {
						_this.relTop = _this.layerObj.offset().top - $(window).scrollTop();
						_this.relLeft = _this.layerObj.offset().left - $(window).scrollLeft();
					}
				});
			}
			
			//window对象 变动的时候改变弹出层的位置
			var resetExcute = function(){
				_this.background.css({
					width: $(window).width() + 'px',
					height: $(window).height() + 'px',
					top: 0,
					left: 0
				});
				
				if( _this.relTop ){
					$(_this.layerObjObj).css({
						top: _this.relTop + 'px',
						left: _this.relLeft + 'px' 
					});
				}
			}
			
			resetExcute();
			
			$(window).load(resetExcute).resize(resetExcute).scroll(resetExcute);
			
		},

		/***************************************
		 * 
		 * 显示弹出层
		 * 
		 ***************************************/
		show : function() {
			if(this.opts.showMatte){
				this.background.appendTo('body').show();
			}
			
			this.layerObj.appendTo('body').show().css({
				top: (this.layerObj.offset().top - 40) + 'px',
				opacity: .3
			}).animate({
				top: (this.layerObj.offset().top + 40) + 'px',
				opacity: 1
			}, function(){
			});
			
		},
		
		/***************************************
		 * 
		 * 关闭弹出层
		 * 
		 ***************************************/
		close:function(){
			var _this = this;
			
			this.layerObj.animate({
				top: (_this.layerObj.offset().top - 40) + 'px',
				opacity: 0
			}, function(){
				_this.background.remove();
				_this.layerObj.remove();
			});
			
		},
		
		/***************************************
		 * 
		 * 获取弹出层的IFrame对象
		 * 
		 ***************************************/
		getIFrame : function(){
			return this.iframeObj;
		}

	}

})(jQuery);